<template>
  <div class="order-detail-box">
    <nav-bar class="nav-bar">
      <template v-slot:default>
        定单详情
      </template>
    </nav-bar>
    <div class="order-status">
      <div class="status-item">
        <label>订单状态：</label>
        <span>{{statusString}}</span>
      </div>
      <div class="status-item">
        <label>订单编号：</label>
        <span>{{detail.order_no}}</span>
      </div>
      <div class="status-item">
        <label>下单时间：</label>
        <span>{{detail.created_at}}</span>
      </div>

      <van-button v-if="detail.status == 1"  @click="showPayFn" style="margin-bottom: 10px" color="#1baeae" block>去支付</van-button>
      <van-button v-if="detail.status == 2"  @click="handleConfirmOrder" block >确认订单</van-button>
    </div>
    <div class="order-price">
      <div class="price-item">
        <label>商品金额：</label>
        <span>¥ {{total + '.00'}}</span>
      </div>
      <div class="price-item">
        <label>配送方式：</label>
        <span>普通快递</span>
      </div>
    </div>

    <van-card
            v-for="item in detail.orderDetails.data" :key="item.id"
          :num="item.num"
          :price="item.price+'.00'"
          desc="全场包邮"
          :title="item.goods.title"
          :thumb="item.goods.cover_url"
     />



    <div style="width:100%;height:50px;">

    </div>

    <van-popup
      v-model:show="showPay"
      position="bottom"
      :style="{ height: '40%' }"
    >

      <div :style="{ width: '90%', margin: '0 auto', padding: '50px 0' }">
        <van-grid :border="false" :column-num="2">
          <van-grid-item  text="支付宝">
            支付宝二维码<br>
            <van-image width="150" height="150" :src="aliyun" />
          </van-grid-item>
          <van-grid-item text="微信支付">
            微信二维码<br>
            <van-image width="150" height="150" :src="wechat" />
          </van-grid-item>
        </van-grid>

      </div>
    </van-popup>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted,computed } from 'vue'
  import NavBar from "components/common/navbar/NavBar";
  import { getOrderDetail, confirmOrder, payOrder,payOrderStatus,viewExpress } from 'network/order'
  import { Dialog, Toast } from 'vant'
  import { useRoute, useRouter } from 'vue-router'


  export default {
    name: 'OrderDetail',
    components: {
      NavBar
    },
    setup() {
      const route = useRoute()
      const router = useRouter()
      const state = reactive({
          orderNo:'',  // 定单ID
          detail:{
              orderDetails:{
                data:[]
              },
              status:0
          },
          showPay:false,
          aliyun:'',
          wechat:''
      })

      const init = () =>{
         const {id} =  route.query;
         state.orderNo = id;

          getOrderDetail(id).then(res=>{
            console.log(res);
            state.detail = res;
          })

      }

      onMounted(() => {
          Toast.loading({message:'加载中...', forbidClick:true});
          init();
          Toast.clear();
      })

      const statusString = computed(()=>{
        // 1下单 2支付 3发货 4收货 5过期
        let status = ['', '已下单', '已支付', '等待发货', '确认收货', '已过期'];

        return status[state.detail.status];
      })

      const total = computed(()=>{
          let sum = 0;

          state.detail.orderDetails.data.forEach(item=>{
              sum += item.num * item.price;
          })

          return sum;
      })

      const showPayFn = () =>{
          state.showPay = true;

          payOrder(state.orderNo, {type:'aliyun'}).then(res=>{
            state.aliyun = res.qr_code_url;
            state.wechat = res.qr_code_url;
          })

          // 轮询查看
          const timer = setInterval(()=>{
            payOrderStatus(state.orderNo).then(res=>{

              console.log(res);
              if(res == '2') {
                clearInterval(timer);
                state.showPay = false;
                router.push({path:'/orderdetail', query:{id:state.orderNo}})
              }

            })
          }, 2000)

      }

      const handleConfirmOrder = ()=>{
        Dialog.confirm({
          title:'是否确认订单'
        }).then(()=>{
          confirmOrder(state.orderNo).then(res=>{

              Toast('确认成功');
              init();


          })
        }).catch(()=>{

        })
    }

      const close = () =>{
        Dialog.close();
      }

      return {
        ...toRefs(state),
        statusString,
        total,
        showPayFn,
        handleConfirmOrder,
        close
      }




    }
  }
</script>

<style lang="scss" scoped>
  .order-detail-box {
    text-align: left;
    background: #f7f7f7;
    .order-status {
      background: #fff;
      margin-top: 44px;
      padding: 20px;
      font-size: 15px;
      .status-item {
        margin-bottom: 10px;
        label {
          color: #999;
        }
        span {

        }
      }
    }
    .order-price {
      background: #fff;
      margin: 20px 0;
      padding: 20px;
      font-size: 15px;
      .price-item {
        margin-bottom: 10px;
        label {
          color: #999;
        }
        span {

        }
      }
    }
    .van-card {
      margin-top: 0;
    }
    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
</style>
